<template>
  <div class="comment">
      <h3>发表评论的子组件</h3>
      <hr>
      <textarea placeholder="请输入要BB的内容(最多吐槽150字)" maxlength="150" v-model="msg"></textarea>
      <mt-button type="primary" size="large" >发表评论</mt-button>
      <div class="cmt-list">
         <div class="cmt-item">
           <div class="cmt-title">第一楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:12-12-12 12:12:12</div>
           <div class="cmt-body">娃哈哈</div>
         </div>
      </div>
      <mt-button type="danger" size="large" plain @click="getmore">加载评论</mt-button>
  </div>
</template>

<script>
  // import {Toast} from 'mint-ui'
  // export default{
  //   data(){
  //     return{
  //       commentlist:'',
  //       pageindex:1,
  //       id:$route.params.id,
  //       msg:''
  //     }
  //   },
  //   created:{
  //     getcomments();
  //   },
  //   props:['id'],
  //   methods:{
  //      //获取评论
  //      getcomments(){
  //        this.$http.get('/api/getcomments/:artid?pageindex').then(result=>{
  //          if(result.body.status===0){
  //            this.commentlist=this.comentlist.concat(result.body.message);
  //          }else{
  //             Toast("获取信息失败")
  //          }
  //        })
  //      },
  //      getmore(){
  //        getcomments();
  //        pageindex++
  //      },
  //      //发表评论
  //      addcomments(){
  //        //是否为空
  //        if(this.msg.trim().length===0){
  //          return Toast("评论内容不为空");
  //        }
  //        this.$http.post('/api/postcomment/:id',{content:this.msg.trim()}).then(result=>{
  //          if(result.body.status===0){
  //            var cmt={user_name="匿名用户",add_time:Data.now(),content:this.msg.trim()};
  //            this.commentlist.unshit(cmt);
  //            this.msg="";
  //          }
  //        })
  //      }
  //   }
  // }
</script>

<style lang="scss" scoped>
  .comment{
    font-size:15px;
    textarea{
      margin: 0px;
    }
    .cmt-list{
      margin: 0px;
      .cmt-item{
        .cmt-title{
           background-color: gray;
        }
        .cmt-body{
          text-indent: 2em;
        }
      }
    }
  }
</style>
